<template>
    <NuxtLayout name="default">
        <div class="layout-robot">
            <div class="robot-menu">
                <div class="skinny">
                    <photos width="46px" height="46px" radius="6px" :src="robotDetail.logo" />
                    <div class="ml-2">
                        <h3 class="line-clamp-1 text-lg font-medium text-tx-regular">
                            <el-tooltip
                                effect="dark"
                                placement="top-start"
                                :content="robotDetail.name"
                            >
                                {{ robotDetail.name }}
                            </el-tooltip>
                        </h3>
                        <em class="text-xs not-italic text-tx-secondary">
                            <span v-if="robotDetail.owned">拥有者</span>
                            <span v-else>
                                <template v-if="robotDetail.power === 1">查看者</template>
                                <template v-if="robotDetail.power === 2">编辑者</template>
                                <template v-if="robotDetail.power === 3">管理者</template>
                                <template v-if="robotDetail.power === 4">拥有者</template>
                            </span>
                        </em>
                    </div>
                </div>
                <div class="option">
                    <div
                        v-for="(item, index) in menusList"
                        :key="index"
                        class="item"
                        :class="currentTab === item.key ? 'active' : ''"
                        @click="handleSwitchMenu(item.key)"
                    >
                        <icon :name="item.icon" :size="18" />
                        <span class="ml-2">{{ item.name }}</span>
                    </div>
                </div>
                <div class="flex justify-center py-3 border-t border-br-extra-light">
                    <el-button :icon="Back" @click="router.back">
                        全部智能体
                    </el-button>
                </div>
            </div>
            <div class="robot-body">
                <component
                    :is="componentMap[currentTab]"
                    :robot="robotDetail"
                    @to-row="handleSwitchMenu"
                    @update="queryRobotDetail"
                />
            </div>
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import { Back } from '@element-plus/icons-vue'
import chatRoomingApi from '~/api/agent/chat/rooming'
import robotSmarterApi from '~/api/agent/robot/smarter'
import application from './_components/application.vue'
import publish from './_components/publish.vue'
import journal from './_components/journal.vue'
import teamed from './_components/teamed.vue'

// 路由的数据
const route = useRoute()
const router = useRouter()
const currentTab = ref<string>('application')

// 智能体信息
const robotCode = String(route.params.code)
const robotDetail = ref<RobotSmarterDetailResponse>({} as RobotSmarterDetailResponse)

// 组件地图
const componentMap: any = {
    application,
    journal,
    publish,
    teamed
}

// 菜单列表
const menusList = [
    {
        key: 'application',
        name: '应用配置',
        icon: 'el-icon-Setting'

    },
    {
        key: 'publish',
        name: '发布渠道',
        icon: 'el-icon-Link'
    },
    {
        key: 'journal',
        name: '对话日志',
        icon: 'el-icon-Tickets'
    },
    {
        key: 'teamed',
        name: '团队成员',
        icon: 'el-icon-User'
    },
    {
        key: 'chats',
        name: '立即对话',
        icon: 'el-icon-ChatLineRound'
    }
]

/**
 * 菜单切换
 *
 * @param tab
 * @param id
 * @author zero
 */
const handleSwitchMenu = async (tab: string, id?: string) => {
    if (tab === 'chats') {
        await chatRoomingApi.create(robotCode)
        await router.push('/chats')
    } else {
        currentTab.value = tab.toLowerCase()
        const queryParams: {
            currentTab: string;
            documentId?: string
        } = { currentTab: tab }

        if (id) {
            queryParams.documentId = id
        }

        await router.replace({
            query: queryParams
        })
    }
}

/**
 * 查智能体
 *
 * @author zero
 */
const queryRobotDetail = async () => {
    robotDetail.value = await robotSmarterApi.detail(robotCode)
}

/**
 * 查找菜单
 *
 * @author zero
 */
const findValidateMenu = () => {
    const activeTab = String(route.query?.currentTab)
    const arraysTab = menusList.map(item => item.key)
    const stringTab = arraysTab.find(item => item.toLowerCase() === activeTab.toLowerCase())
    currentTab.value = stringTab || 'application'
}

watch(
    () => robotCode,
    async (value) => {
        if (value) {
            await queryRobotDetail()
            findValidateMenu()
        }
    },
    { immediate: true }
)
</script>

<style scoped lang="scss">
.layout-robot {
    display: flex;
    flex: 1;
    overflow: hidden;
    .robot-menu {
        display: flex;
        flex: 0 0 200px;
        flex-direction: column;
        height: 100%;
        margin-right: 10px;
        background-color: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        .skinny {
            display: flex;
            padding: 15px 10px;
            border-bottom: 1px solid var(--el-border-color-lighter);
        }
        .option {
            flex: 1 1 0;
            width: 100%;
            padding-inline: 1rem;
            margin-inline: auto;
            font-size: var(--el-font-size-small);
            .item {
                display: flex;
                align-items: center;
                padding: 10px 12px;
                margin: 10px 0;
                font-weight: var(--el-font-size-large);
                color: var(--el-text-color-regular);
                cursor: pointer;
                border-radius: 8px;
                &.active {
                    color: var(--el-color-primary);
                    background-color: var(--el-color-primary-light-9);
                }
            }
        }
    }
    .robot-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: auto;
    }
}
</style>
